<template>
	<view>
		<view class="equipment-navbar">
			<view class="" :style="`height: ${statusBarHeight}px;`"></view>
			<view class="equipment-add">
				<view class="">
					<u-tabs :list="list1" :inactiveStyle="{
			    color: '#fff',
			    transform: 'scale(1)'
			}" lineColor="#fff" :activeStyle="{
			    color: '#fff',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'}"></u-tabs>
				</view>
				<view class="right">
					<view class="add-btn" @tap="isAdd=!isAdd">
						<image src="../../static/Vector@2x.png" mode=""></image>
					</view>
					<view class="mask" v-show="isAdd" @tap="isAdd=false">
						<view class="position-add">
							<view class="item-add" @tap="handleScanCode">
								<image src="../../static/Group1410135267@2x.png"></image> {{$t('equipment.name2')}}
							</view>
							<view class="item-add" @tap="handleAdd">
								<image src="../../static/Group1410135269@2x.png"></image> {{$t('miner.name12')}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="position: relative;">
			<view class="seltop flex-between">
				<view class="left" @click="showpopup=!showpopup">
					<view class="">{{group_name}}</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<u-icon size='24' name="search" color="#fff" @click="isInp=!isInp"></u-icon>
				<!-- <image src="../../static/quanping.png" mode="" @click="$fun.jump(`/pages/miner/fullminer`)"></image> -->
			</view>
			<view class="popuplist" v-if="showpopup==true">
				<u-overlay :show="showpopup" @click="showpopup = false" :style="`margin-top: ${100+statusBarHeight}px`">
					<view class="popupSel">
						<scroll-view scroll-y="true" style="height: 100%;">
							<view class="popupitem" :style="group_id==item.id?'color:#0055ff':''" v-for="(item,index) in groupListT" @click="selGroup(item)">{{item.name}}({{item.num}})</view>
						</scroll-view>
					</view>
				</u-overlay>
				
			</view>
		</view>
		
		<view class="navgrid">
			<view class="isinput" v-if="isInp">
				<input type="text" v-model="search" confirm-type="search" @confirm='handleSearch' :placeholder="$t('miner.name11')" placeholder-class="search" />
			</view>
			 <u-grid
					:border="false"
					col="4"
					@click="click"
			>
				<u-grid-item
						v-for="(baseListItem,baseListIndex) in navlist"
						:key="baseListIndex"
				>
					<view class="" :style="selNavIndex==baseListIndex?'color:#0055ff':''">
						<view class="grid-text" >{{baseListItem.name}}</view>
						<view style="margin-top: 10rpx;">{{baseListItem.value}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="" style="height: 16rpx;background-color: #f8f8f8;"></view>
		<scroll-view scroll-y="true" :style="`height:${tabheight}px`" @scrolltolower="scrolltolower">
			<table class="istable">
				<thead>
					<tr>
						<th>{{$t("miner.name1")}}</th>
						<th>5{{$t("miner.name2")}}{{$t("miner.name4")}}</th>
						<th>24{{$t("miner.name3")}}{{$t("miner.name4")}}</th>
						<th>{{$t("miner.name5")}}</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in list" :key="index" @click="$fun.jump(`./detail?sn=${item.sn}`)">
						<td>{{item.name}}</td>
						<td>{{item.hs5}} <span>H/s</span> </td>
						<td>{{item.hs24}} <span>H/s</span> </td>
						<td>{{item.pingLoss}}<span>%</span></td>
					</tr>
				</tbody>
			</table>
			<view class="" style="background-color: #fff;padding: 30rpx;" v-if="list.length==0">
				<rich-text :nodes="textInfo"></rich-text>
			</view>
		</scroll-view>
		
		<TabBar :tabBarShow="2"></TabBar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:0,
				isAdd:false,
				list: [{
						name: this.$t('miner.name1'),
					},
					// {
					// 	name: '汇拨',
					// },
				],
				navlist: [{
					name: "全部",
					value: '-1'
				}, {
					name: "在线",
					value: '0'
				}, {
					name: "离线",
					value: '1'
				}, {
					name: "故障",
					value: '2'
				}, ],
				selNavIndex:0,
				showpopup: false,
				tabheight:0,
				page:1,
				search:'',
				isInp:false,
				onlineCode:-1,
				list:[],
				group_id:-1,
				groupListT:[],
				group_name:'',
				group_num:0,
				textInfo:'',
			}
		},
		created() {
			
		},
		computed:{
			list1(){
				return [{
					name: this.$t('miner.name1'),
				},]
				
			}
		},
		onLoad() {
			uni.hideTabBar()
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.tabheight=phoneInfo.windowHeight-this.statusBarHeight-230
			
			// this.getUrlList()
		},
		onShow() {
			this.getStatusList()
			this.page=1
			// this.list=[]
			this.grouping()
		},
		methods: {
			handleAdd() {
				this.$fun.jump('/pageC/add')
			},
			handleScanCode() {
				console.log(11);
				let _that = this
				//#ifdef H5
				this.$fun.msg(this.$t('equipment.name10'))
				//#endif
				// #ifndef H5
				uni.scanCode({
					success: function(res) {
						_that.$fun.jump(`/pageC/add?sn=${res.result}`)
					}
				});
				// #endif
			},
			click(name){
				console.log(name)
				this.selNavIndex = name
				this.onlineCode=this.navlist[name].id
				this.page=1
				this.list=[]
				uni.$u.throttle(this.getUrlList(), 800)
				console.log(uni.$u)
			},
			close(){
				this.showpopup = false
			},
			open(){
				this.showpopup = true
			},
			handleNav(item,index){
				console.log(item)
				this.selNavIndex = index
				
			},
			selGroup(item){
				this.group_name=item.name
				this.group_id=item.id
				this.group_num=item.num
				this.page=1
				uni.$u.throttle(this.getUrlList(), 800)
			},
			grouping(){
				this.$fun.ajax.post('butt/groupList', {}).then(res => {
					if (res.code == 1) {
						this.groupListT = res.data
						this.group_name=res.data[0].name
						this.group_id=res.data[0].id
						this.group_num=res.data[0].value
						this.getUrlList()
					}
				});
			},
			handleSearch(){
				this.page=1
				this.list=[]
				this.getUrlList()
			},
			handleDetails(item){
				this.$fun.jump(`/pages/details/details?id=${item.id}`)
			},
			getStatusList(){
				this.$fun.ajax.post('butt/statusList', {}).then(res => {
					if (res.code == 1) {
						res.data.map((item)=>{
							if(item.id=='all'){
								item.id=-1
							}
						})
						this.navlist=res.data
					}
				});
			},
			scrolltolower(){
				this.getUrlList()
			},
			getUrlList(){
				this.$fun.ajax.post('butt/userSnList', {
					type: 1,
					page:this.page,
					limit:10,
					onlineCode: this.onlineCode,
					group_id: this.group_id,
					pipeType: -1,
					vlan: -1,
					search: this.search
				}).then(res => {
					this.equipmentInfo = res.data
					if (res.data.list.length > 0) {
						if(this.page>1){
							this.list.push(...res.data.list);
							// this.addressList = res.data
						}else{
							this.list=res.data.list
						}
						this.page++
					} else {
						if (this.page != 1) {
							this.$fun.msg(this.$t('nomore'))
						}else{
							this.list=res.data.list
						}
					}
					this.textInfo=res.data.textInfo
					// this.list=[{name:'name',hs5:'111',hs24:'111222'}]
					// this.list.push({onlineCode:0,group_id: 0})
					// this.group_num=this.list.length
					// this.navlist.map((item)=>{
					// 	let line=[]
					// 	this.list.map((item1)=>{
					// 		if(item.id==item1.onlineCode){
					// 			line.push(item1)
					// 			item.value=line.length
					// 		}
					// 		if(item.id==this.navlist[this.selNavIndex].id){
					// 			item.value=this.group_num
					// 		}
					// 	})
					// })
					
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: url(/static/imgbgc1.png) no-repeat; 
		background-size: 100%;
		// height: 100%;
	}
	.equipment-navbar {
		background-color: transparent;
		border-radius: 0 0 20rpx 20rpx;

		.equipment-add {
			position: relative;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-bottom: 15rpx;
			padding-right: 20rpx;

			.right {
				position: relative;
				font-size: 14px;
				color: #cacaca;
				padding-bottom: 20rpx;
				.add-btn{
					width: 40rpx;
					height: 40rpx;
					image{
						width: 100%;
						height: 100%;
					};
				}
				.mask {
					background-color: transparent;
					position: absolute;
					z-index: 999;
					top: 100%;
					left: 0;
					width: 100%;
					height: 1000rpx;

					.position-add {
						position: absolute;
						z-index: 9999;
						top: 0;
						right: 0;
						background-color: rgba(30, 30, 30, 0.8);
						background: url('/static/Rectangle4493@2x.png') no-repeat;
						background-size: 100% 100%;
						width: 216rpx;
						// color: #000;
						border-radius: 10rpx;
						padding: 5rpx;
						// border: 2rpx solid #4c4c4c;
						padding: 10rpx 0 24rpx;
						.item-add {
							image{
								width: 32rpx;
								height: 32rpx;
								margin-right: 24rpx;
							}
							margin-top: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #00A3FF;
							text-align: center;
							display: flex;
							justify-content: center;
						}
					}
				}
			}
		}
	}
	.seltop{
		padding: 20rpx 30rpx;
		.left{
			width: 620rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			font-size: 24rpx;
			.search{
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			.scan{
				width: 40rpx;
				height: 40rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		image{
			width: 40rpx;
			height: 40rpx;
		}
		
	}
	.popuplist{
		position: absolute;
		z-index: 19999;
		width: 100%;
		height: auto;
		.popupSel{
			position: absolute;
			z-index: auto;
			background: #fff;
			width: 100%;
			max-height: 260px;
			// padding: 0 0 30rpx 30rpx;
			font-size: 26rpx;
			height: 100%;
			.popupitem{
				height: 100rpx;
				line-height: 100rpx;
				padding: 0 30rpx;
				border-bottom: 1rpx solid #e5e5e52e;
			}
		}
	}
	.isinput{
		width: 690rpx;
		height: 60rpx;
		// line-height: 60rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		// padding: 0 30rpx;
		font-size: 22rpx;
		color: #999999;
		margin: 0 auto 20rpx;
		// margin-top: 30rpx;
		border: 1rpx solid #E5E5E5;
		input{
			// padding: 10rpx 30rpx;
			margin-top: 8rpx;
		}
		.search{
			font-size: 22rpx
		}
	}
	.navgrid{
		height: auto;
		padding: 30rpx 0;
		text-align: center;
		background-color: #FFFFFF;
		color: #383838;
		font-weight: 400;
		font-size: 24rpx;
	}
	.istable{
		width: 100%;
		background-color: #FFFFFF;
		position: relative;
		thead{
			position: sticky;
			top: 0;
			z-index: 999;
			background-color: #FFFFFF;
		}
		th{
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 300;
			color: #8d8d8d;
			text-align: center;
			height: 100rpx;
			// line-height: 100rpx;
			// background-color: #FFFFFF;
			border-bottom: 1rpx solid #E5E5E5;
		}
		td{
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #383838;
			text-align: center;
			height: 60rpx;
			line-height: 80rpx;
			// background-color: #FFFFFF;
			border-bottom: 1rpx solid #f4f4f4;
		}
		span{
			color: #a8a8a8;
			margin-left: 10rpx;
			font-size: 22rpx;
			font-weight: 200;
		}
	}
</style>
